<template>
    <Container>
      <!-- <draggable element="ul" v-model="nav" :options="{group: {name: 'product'}}" @add="addDrag">
        <li v-for="item in nav" :key="item.id" class="item">{{item.name}}</li>
      </draggable> -->
        <div class="title xx-big">条形码生成</div>
        <Input v-model="barcode"/>
        <!-- <Barcode :value="barcode" :options="{background: '#f60'}"></Barcode> -->
        <Checkbox  v-model="b.value">hello</Checkbox>
        <Button @click="printTable">打印</Button>
        <table class="a" border="1" width="100%" ref="table">
            <tr>
                <th style="font-size: 40px">姓名</th>
                <th width="400">手机</th>
                <th>性别</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>以安</td>
                <td>15233332222</td>
                <td>女</td>
                <td>我没有眼睛</td>
            </tr>
        </table>

        <IEcharts :options="bar" auto-resize></IEcharts>
        <IEcharts :options="pie" auto-resize></IEcharts>
        <div class="title xx-big">富文本编辑器</div>
        <div class="html" v-html="editor.content"></div>
        <editor ref="myTextEditor"
              :fileName="'file'"
              :canCrop="editor.canCrop"
              :uploadUrl="editor.uploadUrl"
              v-model="editor.content"></editor>
        <div v-html="css"></div>
    </Container>
</template>

<script>
    // import Barcode from '@xkeshi/vue-barcode';
    import Editor from '@/components/Quilleditor.vue';
    import IEcharts from '~/ECharts';
    // import IEcharts from 'vue-echarts-v3/src/lite';
    // import 'echarts/lib/chart/bar';
    // import 'echarts/lib/component/title';
    // import 'echarts/lib/chart/line';
    // import 'echarts/lib/chart/pie';
    // import 'echarts/lib/component/tooltip';
    // import 'echarts/lib/component/legend';
    import Print from 'printd';
    const p = new Print();
    export default {
        components: {
            Barcode,
            IEcharts,
            Editor
        },
        data() {
            return {
              nav: [{
                id: 1,
                type: 1,
                icon: 'image',
                name: '图片',
                active: false
              }, {
                id: 2,
                type: 2,
                icon: 'cube',
                name: '商品',
                active: false
              }, {
                id: 3,
                type: 3,
                icon: 'pricetags',
                name: '优惠券',
                active: false
              }, {
                id: 4,
                type: 4,
                icon: 'navicon-round',
                name: '导航',
                active: false
              }, {
                id: 5,
                type: 5,
                icon: 'videocamera',
                name: '媒体',
                active: false
              }],
                style: `
                    .a {
                        background-color: #6cf
                    }
                    tr {
                        height: 80px;
                    }
                `,
                barcode: '33333',
                b: {
                    value: false,
                },
                loading: false,
                editor: {
                    content: ''
                },
                bar: {
                    title: {
                        text: '柱子'
                    },
                    color: ['#33b6ba', '#fdce5c', '#4a90ff', '#ff7a7b', '#67cdf3', '#d5242c', '#9334b6', '#a38cf8', '#ff9561'],
                    tooltip: {},
                    xAxis: {
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            rotate: 30,
                        },
                        type: 'category',
                        data: ['保养', '钣喷', '美容', '洗车', '机修', '精品', '改装', '轮胎', '其他']
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        type: 'line',
                        symbol: 'pin',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 0
                            }
                        },
                        itemStyle: {
                          normal: {
                            color: "#6cf"
                          }
                        },
                        areaStyle: {
                            normal: {
                                color: '#eef'
                            }
                        },
                        data: [45, 22, 18, 40, 15, 32, 15, 45, 38]
                    }, {
                        type: 'bar',
                        barWidth: 40,
                        itemStyle: {
                            normal: {
                                color(params) {
                                    var colorList = ['#33b6ba', '#fdce5c', '#4a90ff', '#ff7a7b', '#67cdf3', '#d5242c', '#9334b6', '#a38cf8', '#ff9561'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        data: [45, 22, 18, 40, 15, 32, 15, 45, 38]
                    }]
                },
                pie: {
                    title: {
                        text: '大饼'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'horizontal',
                        bottom: 0,
                        data: ['保养', '钣喷', '美容', '洗车', '机修', '精品', '改装', '轮胎', '其他']
                    },
                    color: ['#33b6ba', '#fdce5c', '#4a90ff', '#ff7a7b', '#67cdf3', '#d5242c', '#9334b6', '#a38cf8', '#ff9561'],
                    series: [
                        {
                            type:'pie',
                            radius: ['30%', '60%'],
                            data:[
                                {value:45, name:'保养'},
                                {value:22, name:'钣喷'},
                                {value:18, name:'美容'},
                                {value:40, name:'洗车'},
                                {value:15, name:'机修'},
                                {value:32, name:'精品'},
                                {value:15, name:'改装'},
                                {value:45, name:'轮胎'},
                                {value:38, name:'其他'},
                            ]
                        }
                    ]
                }
            }
        },
        mounted() {
            this.doRandom();
        },
        methods: {
          addDrag(e) {
          },
            printTable() {
                // 打印时需要重新写 css
                p.print(this.$refs.table, this.style);
            },
            doRandom() {
                const that = this;
                let data = [];
                for (let i = 0, min = 5, max = 99; i < 6; i++) {
                    data.push(Math.floor(Math.random() * (max + 1 - min) + min));
                }
                that.loading = !that.loading;
                that.bar.series[0].data = data;
            },
            onReady(instance) {
            },
            onClick(event, instance, echarts) {
            }
        },
        computed: {
            css() {
                return `
                    <style>
                    ${this.style}
                    </style>
                `
            }
        }
    }
</script>
<style scoped>  
.item {
  width: 200px;
  height: 100px;
  text-align: center;
  border: 1px solid #ddd;
}
</style>  
